/*global*/
body { overflow:hidden; margin:0; padding:0; font-size:10px; font-family:Tahoma}
.ruler { background:#23daff url(bg.png) repeat-x 0 0; opacity:0.8; position:absolute; left:0; top:20px; padding-left:60px; height:60px; overflow:hidden}

/*scale*/
span { display:inline-block; vertical-align:bottom; width:1px; height:10px}
div { white-space:nowrap}
.pre { margin-bottom:36px} 
.pre span { vertical-align:top} 
.l, .m, .s { background:#000} 
.l { height:12px} 
.m { height:8px} 
.s { height:5px}

/*mark*/
.middle { position:absolute; left:10px; top:21px; height:15px; width:100%; z-index:5}
.middle b { display:inline-block; background:transparent; width:100px; text-align:center; font-size:12px; color:#fff; font-weight:700}

/*guide*/
.guide { position:absolute; left:20px; top:0; display:inline-block; text-align:center; border-left:1px dashed #333; height:100px; display:none}
.guide i { display:inline-block; position:absolute; top:40px; height:10px; line-height:10px; background-color:#23daff; border:1px solid #333; padding:2px 4px; font-size:14px; font-style:normal; color:#000; z-index:20}

/*operate*/
.operate { position:absolute; height:50px; width:50px; top:0; left:0; text-align:center; padding:5px 2px; overflow:hidden}
.operate b { display:block; float:left; width:17px; cursor:pointer; height:17px; margin:4px; background:url(operate_icon.png) no-repeat 0 0}
.operate .o-close { background-position:-33px 0}
.operate .o-dir { background-position:-66px 0}
.operate .o-change { background-position:-99px 0}

/*change color*/
.color { position:absolute; left:70px; top:40px; z-index:50; display:none}

/*vertical mode*/
.ruler.ver { width:60px; height:1000px; left:20px; top:0; padding-left:0; padding-top:60px; background-image:url(bg_ver.png); background-repeat:repeat-y}
.ruler.ver span { display:block; width:10px; height:1px}
.ruler.ver .pre { float:left}
.ruler.ver .next { float:right}
.ruler.ver .l { width:12px}
.ruler.ver .m { width:8px}
.ruler.ver .s { width:5px}
.ruler.ver .next .m { margin-left:4px}
.ruler.ver .next .s { margin-left:7px}
.ruler.ver .middle { left:0; top:52px; text-align:center}
.ruler.ver .middle b { display:block; width:auto; height:100px; vertical-align:middle}
.ruler.ver .operate { padding:2px 5px}
.guide.ver { display:block; height:0; left:0; top:20px; width:100px; border-left:0; border-top:1px dashed #333}
.guide.ver i { top:-10px; position:relative; margin:0 auto}
.color.ver { left:22px; top:60px}
.color.ver button, .color.ver input { display:block; margin-top:5px}

/*min*/
.min-block { width:48px; height:48px; background:url(icon_64.png) no-repeat; -o-background-size:48px 48px; position:absolute; left:0; top:0; display:none}
.min-block .o-max { width:17px; height:17px; display:block; position:absolute; background:url(operate_icon.png) no-repeat -132px 0; right:5px; bottom:5px; cursor:pointer}
